<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic TextBox - jQuery EasyUI Demo</title>
    <!--JQuery文件-->
    <script type="text/javascript" src="../../static/easyui/jquery.min.js"></script>
    <!--EasyUI CSS样式表-->
    <link rel="stylesheet" type="text/css" href="../../static/easyui/themes/bootstrap/easyui.css"
    />
    <link rel="stylesheet" type="text/css" href="../../static/easyui/themes/icon.css"
    />
    <!--EasyUI JS文件-->
    <script type="text/javascript" src="../../static/easyui/jquery.easyui.min.js"
    ></script>
    <!--EasyUI treegrid 拖拽插件-->
    <script src="../../../static/easyui/plugins/treegrid-dnd.js"></script>

    <!--laydate插件-->
    <script src="../../../static/laydate/laydate.js"></script>
    <!--layer插件-->
    <script src="../../static/layer/layer.js"></script>

    <script type="text/javascript" src="../../static/js/datagrid.js"
    ></script>


    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_521438_3iml11s00r1wcdi.css"
    />
    <script type="text/javascript" src="../../static/js/xueyuan.js"
    ></script>
    <link rel="stylesheet" type="text/css" href="../../static/css/nav.css"
    />
    <link rel="stylesheet" type="text/css" href="../../static/css/xueyuan.css"/>
</head>
<body>
<div style="margin:20px 0;"></div>
<div style="width:auto;padding:30px 60px;float:left">
    <h2>基本文本框</h2>
    <div style="margin-bottom:10px">
        <div>Email:</div>
        <input class="easyui-textbox" data-options="prompt:'Enter a email address...',validType:'email'"

        >
    </div>
    <div style="margin-bottom:10px">
        <div>First Name:</div>
        <input class="easyui-textbox">
    </div>
    <div style="margin-bottom:10px">
        <div>Last Name:</div>
        <input class="easyui-textbox">
    </div>
    <div style="margin-bottom:10px">
        <div>Company:</div>
        <input class="easyui-textbox">
    </div>
    <div style="margin:20px 0 "></div>
    <h2>带按钮的文本框</h2>
    <div style="margin-bottom:10px">
        <input class="easyui-textbox" data-options="buttonText:'搜索',prompt:'Search...'"
        >
    </div>
    <div style="margin-bottom:10px">
        <input class="easyui-textbox" data-options="buttonText:'搜索',buttonIcon:'iconfont icon-soushuo',prompt:'Search...'"
        >
    </div>
    <div style="margin:20px 0 "></div>
    <h2>带清除图标的文本框</h2>
    <input id="tt" style="width:250px" data-options="
prompt: 'Input something here!',
icons:[{
iconCls:'iconfont icon-soushuo',
handler: function(e){
var v = $(e.data.target).textbox('getValue');
alert('The inputed value is ' + (v ? v : 'empty'));
}
}]
">
    <script>
        $.extend($.fn.textbox.methods, {
            addClearBtn: function (jq, iconCls) {
                return jq.each(function () {
                    var t = $(this);
                    var opts = t.textbox('options');
                    opts.icons = opts.icons || [];
                    opts.icons.unshift({
                        iconCls: iconCls,
                        handler: function (e) {
                            $(e.data.target).textbox('clear').textbox('textbox').focus();
                            $(this).css('visibility', 'hidden');
                        }
                    });
                    t.textbox();
                    if (!t.textbox('getText')) {
                        t.textbox('getIcon', 0).css('visibility', 'hidden');
                    }
                    t.textbox('textbox').bind('keyup', function () {
                        var icon = t.textbox('getIcon', 0);
                        if ($(this).val()) {
                            icon.css('visibility', 'visible');
                        } else {
                            icon.css('visibility', 'hidden');
                        }
                    });
                });
            }
        });
        $(function () {
            $('#tt').textbox().textbox('addClearBtn', 'icon-clear');
        });
    </script>
    <div style="margin:20px 0;"></div>
    <h2>自定义文本框</h2>
    <div style="margin-bottom:10px">
        <input class="easyui-textbox" style="width:100%;height:40px;padding:12px"
               data-options="prompt:'Username',iconCls:'icon-man',iconWidth:38">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" type="password" style="width:100%;height:40px;padding:12px"
               data-options="prompt:'Password',iconCls:'icon-lock',iconWidth:38">
    </div>
</div>
<div style="width:auto;padding:30px 60px;float:left">
    <h2>带图标的文本框</h2>
    <div style="margin:10px 0 20px 0">
        <span>Select Icon Align: </span>
        <select onchange="$('#tt').textbox({iconAlign:this.value})">
            <option value="right">Right</option>
            <option value="left">Left</option>
        </select>
    </div>
    <input id="tt" class="easyui-textbox" style="width:400px" data-options="
prompt: 'Input something here!',
iconWidth: 22,
icons: [{
iconCls:'iconfont icon-xinzeng',
handler: function(e){
$(e.data.target).textbox('setValue', 'Something added!');
}
},{
iconCls:'iconfont icon-shanchu',
handler: function(e){
$(e.data.target).textbox('clear');
}
},{
iconCls:'iconfont icon-soushuo',
handler: function(e){
var v = $(e.data.target).textbox('getValue');
alert('The inputed value is ' + (v ? v : 'empty'));
}
}]
">
    <div style="margin:20px 0;"></div>
    <h2>多行文本框</h2>
    <input class="easyui-textbox" data-options="multiline:true"
           value="This TextBox will allow the user to enter multiple lines of text.">
    <div style="margin:20px 0;"></div>
    <h2>文本框大小</h2>
    <div style="margin-bottom:40px">
        <input class="easyui-textbox" data-options="iconCls:'iconfont icon-soushuo',iconWidth:28,prompt:'Search small...'"
        >
    </div>
    <div style="margin-bottom:40px">
        <input class="easyui-textbox" data-options="iconCls:'iconfont icon-soushuo',iconWidth:28,prompt:'Search large...'"
        >
    </div>
    <div style="margin-bottom:40px">
        <input class="easyui-textbox" data-options="iconCls:'iconfont icon-soushuo',iconWidth:28,prompt:'Search big...'"
        >
    </div>
    <div style="margin-bottom:40px">
        <input class="easyui-textbox" data-options="iconCls:'iconfont icon-soushuo',iconWidth:28,prompt:'Search huge...'"
        >
    </div>
</div>
</body>
</html>